<template>
  <el-container class="index-con">
    <el-aside :class="showclass">
      <leftnav></leftnav>
    </el-aside>
    <el-container class="main-con">
      <el-header class="index-header">
        <navcon></navcon>
      </el-header>
      <el-main class="index-main" v-if="isRouterActive">
        <router-view></router-view>

        <div class="dialoging" v-if="isDialog">
          <span>钱包余额不足，请联系管理员充值!"</span>
        </div>
      </el-main>
      <!-- <el-footer>
        <footnav></footnav>
      </el-footer> -->
    </el-container>
  </el-container>
</template>
<script>
// 导入组件
import navcon from "../components/navcon.vue";
import leftnav from "../components/leftnav.vue";
import footnav from "../components/foot.vue";
import { service } from "../api/axiosFun";
export default {
  name: "index",
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      userInfo: null,
      showclass: "asideshow",
      showtype: false,
      isRouterActive: true,
      isDialog: false,
    };
  },
  // 注册组件
  components: {
    navcon,
    leftnav,
    footnav,
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
      // if (this.userInfo.balance < 0) {
      //   this.$store.commit("isDialog", true);
      //   this.isDialog = true;
      // } else {
      //   this.$store.commit("isDialog", false);
      //   this.isDialog = false;
      // }
    },
    getLoding(newVal) {
      this.isDialog = newVal;
    },
  },
  created() {
    if (this.$store.state.user) {
      this.userInfo = JSON.parse(this.$store.state.user);
      // if (this.userInfo.balance < 0) {
      //   this.$store.commit("isDialog", true);
      //   this.isDialog = true;
      // } else {
      //   this.$store.commit("isDialog", false);
      //   this.isDialog = false;
      // }
    } else {
      this.getInfo();
    }
    // 监听
    this.$root.Bus.$on("toggle", (value) => {
      if (value) {
        this.showclass = "asideshow";
      } else {
        setTimeout(() => {
          this.showclass = "aside";
        }, 300);
      }
    });
  },
  methods: {
    getInfo() {
      service
        .get("/api/photon/getUserInfo")
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.userInfo = res.data;
            // if (this.userInfo.balance < 0) {
            //   this.$store.commit("isDialog", true);
            //   this.isDialog = true;
            // } else {
            //   this.$store.commit("isDialog", false);
            //   this.isDialog = false;
            // }
            this.$store.commit("user", JSON.stringify(res.data));
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    reload() {
      this.isRouterActive = false;
      this.$nextTick(function () {
        this.isRouterActive = true;
      });
    },
  },
};
</script>
<style >
.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.aside {
  width: 64px !important;
  height: 100%;
  margin: 0px;
  box-shadow: 1px 0px 6px 0px rgba(0, 0, 0, 0.2);
}
.asideshow {
  width: 240px !important;
  height: 100%;
  margin: 0px;
  box-shadow: 1px 0px 6px 0px rgba(0, 0, 0, 0.2);
  background: #11100e;

  /* background: linear-gradient(to bottom, rgb(179,106,245)0%, rgb(46, 48, 148)100%); */
}
.index-header {
  height: 50px !important;
  padding: 0px;
}
.index-header,
.index-main {
  position: relative;
  border-left: 2px solid #00000008;
  box-shadow: 0.005208rem 0 0.03125rem 0 rgba(0, 0, 0, 0.2);
}
.index-main {
  padding-bottom: 0;
  background-color: rgb(240 242 245);
  padding: 20px;  
  /* box-shadow: 0px 2px 4px 0px rgba(189, 205, 221, 0.58);  */
  height: calc(100vh - 128px);
  }
.index-main .ra_box {
  border-radius: 15px;
}
.el-footer {
  height: 50px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.index-main  .dialoging {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #9999ff33;
}
</style>
